<template>
    <div class="sc">
       <div class="esc" @click="goto">
          <p>&lt;</p>
       </div>
         <div class="escd">
          <p>...</p>
       </div>
       <img src="https://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/40154/27/8205/184000/5cf60807E4f2536ca/2e84d34c0e92c0b3.jpg!q70.dpg.webp" alt="">
       <div class="title">
          <span class="small">¥</span>
          <span class="large">2988</span>
          <span class="small">.00</span>
         <div class="titlea">
            <div class="t">
               <div class="s1"></div>
               <p>降价提醒</p>
            </div>
            <div class="tt">
               <div class="s2"></div>
               <p>收藏</p>
            </div>
         </div>
         <div class="a"><p>
            隆邦手工描金 法国进口金色cda水晶红酒杯套装家用威士忌烈酒杯2只装 250ml红酒杯2支（法国进口）</p>
            </div>
            <div class="b">
               <p>支持7天无理由退换，送运费险，让大家买的放心更多商品 </p>
            </div>   
       </div>
         <div class="sd">
           <div class="sa">

           </div>
                
        </div>
        <div class="bay" @click="buy">
           加入购物车
        </div>
    </div>
    
</template>
<script>
import recommend from '../index/recommend.vue'
export default {
   name:'detial',
   components:{recommend},
   props: ["imgsrc", "ziying", "title", "price", "type"],
    data() {
            return {
                 recommendsinf: [],
                  recommendsinfs: []
            }
        },
   methods:{
      goto(){
         this.$router.replace('/index')
      },
       buy(){
          this.$router.replace('/shopping')               
   }
}
}
</script>
<style scoped>
.sc{
    width: 100%;
    height: auto;
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 10%;
}
.esc{
   width: 30px;
   height: 30px;
   font-size: 14px;
   border-radius: 50%;
   position: fixed; 
   left: 10px;
   line-height: 30px;
   text-align: center;
   top: 10px;
   color:white;
   background-color: #666666;
}
.escd{
   width: 30px;
   height: 30px;
   font-size: 27px;
   border-radius: 50%;
   position: fixed; 
   right: 10px;
   line-height: 15px;
   text-align: center;
   top: 10px;
   color:white;
   background-color: #666666;
}
.sc img{
   width: 100%;
   height: 100%;

}
.title{
   padding-top: 12px;
   padding-left: 18px;
   padding-right: 18px;
   width: 100%;
   height: 35.6px;
   background-color: white;
   /* float: left; */
}
.small{
   color: red;
   float: left;
   font-size: 18px;
   position: relative;
   font-weight: 700;
   top: 12px;
}
.large{
   color: red;
   float: left;
   font-size: 30px;
}
.titlea{
   width: 80px ;
   height: 35.6px;
   font-size: 12px;
   float: right;
}
.t{
    float: left;
}
.s1{
   width: 20px;
   height: 20px;
   border-radius: 50%; 
   position: relative;
   left: 14px;
   background-color: tomato;
}
.tt{
    float: right;
}
.s2{
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: rgb(71, 114, 255);
}
.a{
   width: 100%;
   height: 96.6px;
   font-size: 16px;
   padding:12px 18px 12px 18px;
   float: left;
   background-color: white;
}
.b{
   font-size: 12px;
   float: left;
   width: 100%;
   padding:12px 18px 12px 18px;
   background-color: white;
}
.sd{
   width: 100%;
   height: 100px;
   background-color: #F2F2F2;
   float: left;
}
.sa{
   width: 100%;
   height: 100px;
   margin-top: 20px;
   background-color: white;
   border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}
.bay{
   width: 120px;
   height: 40px;
   border-radius: 30px;
   line-height: 40px;
   text-align: center;
   position: fixed;
   background-color: #FFBD0D;
   bottom: 20px;
   right: 10px;
   color: white;
}
</style>